<template>
	<page-container>
		<a-card>
      <div class="flex justify-between">
        <div class="flex">
          <a-button type="primary" @click="$refs.form.add()" v-access="['Help:save']">
            <template #logo>
              <PlusOutlined />
            </template>
            新增
          </a-button>
        </div>
        <a-form layout="inline" :model="searchData" @finish="fetch">
          <a-form-item>
            <a-input v-model:value="searchData.title" placeholder="标题">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :disabled="searchData.title === ''">
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
		<a-card>
      <a-table rowKey="id" :columns="columns" :data-source="items" :pagination="pagination" :loading="loading" @change="tableChange">
        <template #bodyCell="{ text, record, column }">
          <a-space wrap v-if="column.dataIndex === 'operation'">
            <a-button class="text-xs" type="primary" size="small" @click="$refs.form.edit(record)" v-access="['Help:update']">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm="del(record.id)">
              <a-button class="text-xs" danger size="small" v-access="['Help:del']">删除</a-button>
            </a-popconfirm>
          </a-space>
          <div class="l2" v-if="column.dataIndex === 'content'" v-html="text">
          </div>
        </template>
      </a-table>
    </a-card>
		<help-edit ref="form" @change="updated" />
	</page-container>
</template>
<script lang="ts">
import {page, list} from "@/mixins"
import HelpEdit from "./HelpEdit.vue"

const types = {'edu-org': '学历-机构专业', 'edu-rule': '学历-报考条件', 'edu-time': '学历-报考时间', 'edu-major': '学历-专业查询','constructor-org': '二建-机构专业', 'constructor-rule': '二建-报考条件', 'constructor-time': '二建-报考时间', 'constructor-major': '二建-专业查询'}

export default {
	mixins: [page, list],
	components: { HelpEdit },
	data() {
		return {
			loadPath: 'help',
			columns: [
				{
					title: '标题',
					dataIndex: 'title',
					width: 140,
				},
				{
					title: '类型',
					dataIndex: 'type',
					width: 160,
					customRender: ({text}) => types[text] ?? '普通'
				},
				{
					title: '内容',
					dataIndex: 'content',
					ellipsis: true
				},
				{
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
					width: 140,
				},
			],
			searchData: {
				title: ''
			}
		}
	},
	mounted () {
		this.fetch({...this.searchData, page: this.pagination.current})		
	},
	methods: {
	}
}
</script>
<style>
	.l2{
    overflow-y: scroll;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;  
    -webkit-box-orient: vertical;
		max-height: 3rem;
	}
</style>